<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<h:head>
</h:head>
<h:body>
	<rich:panel>
		<f:facet name="header">
			<h:outputText value="#{labels['titlePanelManual']}"
				styleClass="panelTitle" />
		</f:facet>

		<rich:tabPanel switchType="client" style="height: 600;">

			<rich:tab header="Introducción" style="height: 600;">

				<p>Antes de iniciar la aplicacion debe tenerse en cuenta los
					siguientes prerequisitos.</p>
				<ul>
					<li>Tener acceso a un servidor PostgreSql 9.0 o superior</li>
					<li>Por defecto el sistema se conecta a una base de datos
						llamada <strong>#{labels['dbName']}</strong>, para la conexión se utiliza el
						usuario <strong>#{labels['userName']}</strong> con la clave <strong>#{labels['password']}</strong>
					</li>
				</ul>

				<p>Para acceder a las funciones del sistema el usuario cuenta
					con um menu principal ubicado en el lado izquierdo de su navegar,
					el mismo cuenta con las siguientes opciones</p>
				<ul>
					<li>Clientes: através de esta opcion se puede acceder a las
						funciones para la gestion de los clientes del sistema, en el mismo
						podra listar, editar o agregar clientes al sistema</li>
					<li>Cuentas: con esta opcion se accede a las diferentes
						funcionalidades proveidas por el sistema para agregar, editar o
						eliminar las cuentas</li>
					<li>Movimientos: como las 2 opciones anteriores permite las
						operaciones necesarias para el tratamiento de la informacion
						referente a los movimientos.</li>
					<li>Por último tenemos un enlace que permite al usuario volver
						al manual.</li>
				</ul>
			</rich:tab>
			
			<rich:tab header="Modulo Clientes" style="height: 600;">

				<p>
					Para hacer uso de las funcionalidades de este modulo, se cuenta con
					la interfaz de usuario que se observa en la imagen
					<a4j:outputPanel>
						<strong>(haz click)</strong>

						<rich:tooltip>
							<h:graphicImage value="/page/images/cliente1.jpg"
								style="float:right" alt="rf" width="400" height="400" />
						</rich:tooltip>
					</a4j:outputPanel>

					, la misma consta de dos paneles:
				</p>

				<p>Ingreso de Clientes: Este panel consta de un formulario, que
					permite al usuario ingresar los datos basicos para el registro de
					un cliente</p>
				<ul>
					<li>#{labels['name']}</li>
					<li>#{labels['phoneNumber']}</li>
					<li>#{labels['address']}</li>
				</ul>
			Listado de Clientes: este otro panel posee dos elementos para la interacción con el usuario
			<ul>
					<li>Menu desplegable que permite al usuario ordenar el listado
						de clientes por #{labels['name']}, #{labels['phoneNumber']} y #{labels['code']}.</li>
					<li>Una tabla que contiene el listado de los clientes, en la
						misma ademas de mostrar la información de todos los clientes, se
						pueden editar o borar los registros utilizando los iconos que se
						encuentra a la derecha de cada uno. ademas al final de la misma se
						halla una barra que permitira navegar a través de las diferentes
						paginas de la tabla, en el caso en que el numero de registros
						superen el tamaño original.</li>
					<li>Por ultimo, en caso de originarse alguna excepcion en la
						parte superior de la tabla se mostrara un icono que indicara que
						el sistema tuvo un comportamiento irregular y posicionando el
						mouse sobre el veremos un tooltip con la información detallada del
						motivo que origino dicho comportamiento <a4j:outputPanel>
							<strong>(haz click)</strong>
							<rich:tooltip>
								<h:graphicImage value="/page/images/cliente2.jpg"
									style="float:right" alt="rf" width="300" height="250" />
							</rich:tooltip>
						</a4j:outputPanel>
					</li>
				</ul>



			</rich:tab>
			
			
			
			<rich:tab header="Modulo Cuentas" style="height: 600;">

				<p>
					Para hacer uso de las funcionalidades de este modulo, se cuenta con
					la interfaz de usuario que se observa en la imagen
					<a4j:outputPanel>
						<strong>(haz click)</strong>

						<rich:tooltip>
							<h:graphicImage value="/page/images/cuenta1.jpg"
								style="float:right" alt="rf" width="400" height="400" />
						</rich:tooltip>
					</a4j:outputPanel>

					, la misma consta de dos paneles:
				</p>

				<p>Ingreso de Movimientos: Este panel consta de un formulario, que
					permite al usuario ingresar los datos basicos para el registro de
					una cuenta</p>
				<ul>
					<li>#{labels['cuentaInitialBalance']}</li>
				</ul>
				<p>Listado de cuentas: este otro panel posee dos elementos para
					la interacción con el usuario</p>
				<ul>
					<li>Menu desplegable que permite al usuario ordenar el listado
						de clientes por #{labels['code']} y #{labels['amount']}. <a4j:outputPanel>
							<strong>(haz click)</strong>

							<rich:tooltip>
								<h:graphicImage value="/page/images/cuenta2.jpg"
									style="float:right" alt="rf" width="400" height="400" />
							</rich:tooltip>
						</a4j:outputPanel>
					</li>
					<li>Una tabla que contiene el listado de las cuentas, en la misma tambien se
						pueden editar o borar los registros utilizando los iconos que se
						encuentra a la derecha de la tabla. ademas al final de la misma se
						halla una barra que permitira navegar a través de las diferentes
						paginas, en el caso en que el numero de registros
						superen el tamaño original.</li>
					<li>Por ultimo, en caso de originarse alguna excepcion en la
						parte superior de la tabla se mostrara un icono que indicara que
						el sistema tuvo un comportamiento irregular y posicionando el
						mouse sobre el veremos un tooltip con la información detallada del
						motivo que origino dicho comportamiento <a4j:outputPanel>
							<strong>(haz click)</strong>
							<rich:tooltip>
								<h:graphicImage value="/page/images/cuenta3.jpg"
									style="float:right" alt="rf" width="300" height="250" />
							</rich:tooltip>
						</a4j:outputPanel>
					</li>
				</ul>
			</rich:tab>

			

			<rich:tab header="Modulo Movimientos" style="height: 600;">

				<p>
					Para hacer uso de las funcionalidades de este modulo, se cuenta con
					la interfaz de usuario que se observa en la imagen
					<a4j:outputPanel>
						<strong>(haz click)</strong>

						<rich:tooltip>
							<h:graphicImage value="/page/images/movimiento1.jpg"
								style="float:right" alt="rf" width="400" height="400" />
						</rich:tooltip>
					</a4j:outputPanel>

					, la misma consta de dos paneles:
				</p>

				<p>Ingreso de Movimientos: Este panel consta de un formulario, que
					permite al usuario ingresar los datos basicos para el registro de
					un movimiento</p>
				<ul>
					<li>#{labels['amount']}</li>
					<li>#{labels['cuentaId']}</li>
					<li>#{labels['clienteId']}</li>
					<li>#{labels['typeMov']}</li>
				</ul>
			Listado de Movimientos: este otro panel posee dos elementos para la interacción con el usuario
			<ul>
					<li>Menu desplegable que permite al usuario ordenar el listado
						de clientes por #{labels['clienteId']}, #{labels['cuentaId']}, #{labels['clienteId']}, #{labels['date']}
						y #{labels['code']}. <a4j:outputPanel>
							<strong>(haz click)</strong>
							<rich:tooltip>
								<h:graphicImage value="/page/images/movimiento2.jpg"
									style="float:right" alt="rf" width="300" height="250" />
							</rich:tooltip>
						</a4j:outputPanel>
					</li>
					<li>Una tabla que contiene el listado de los movimientos, en la
						misma ademas de mostrar la información de todos los movimientos, se
						pueden editar o borar los registros utilizando los iconos que se
						encuentra a la derecha de cada uno. ademas al final de la misma se
						halla una barra que permitira navegar a través de las diferentes
						paginas de la tabla, en el caso en que el numero de registros
						superen el tamaño original.</li>
					<li>Por ultimo, en caso de originarse alguna excepcion en la
						parte superior de la tabla se mostrara un icono que indicara que
						el sistema tuvo un comportamiento irregular y posicionando el
						mouse sobre el veremos un tooltip con la información detallada del
						motivo que origino dicho comportamiento <a4j:outputPanel>
							<strong>(haz click)</strong>
							<rich:tooltip>
								<h:graphicImage value="/page/images/movimiento3.jpg"
									style="float:right" alt="rf" width="300" height="250" />
							</rich:tooltip>
						</a4j:outputPanel>
					</li>
				</ul>



			</rich:tab>



		</rich:tabPanel>

	</rich:panel>
</h:body>
</html>